<template>
  <view class="container">
    <view class="title">数量统计</view>
    <view class="achieve">
      <view class="order bg-abstract">
        <view class="label">
          <u-icon class="icon" size="30" color="#fff" name="order" />总订单数
        </view>
        <view class="count">{{ count.OrderCount }} 单</view>
      </view>
      <view class="sale bg-abstract">
        <view class="label">
          <u-icon
            class="icon"
            size="30"
            color="#fff"
            name="shopping-cart"
          />总销售额
        </view>
        <view class="money">{{ count.OrderMoney }} 元</view>
      </view>
      <view class="profit bg-abstract">
        <view class="label">
          <u-icon class="icon" size="30" color="#fff" name="man-add" />总客户量
        </view>
        <view class="count">{{ count.BusinessCount }} 个</view>
      </view>
    </view>

    <view class="title">客户分析</view>
    <view class="ChartsBox">
      <qiun-data-charts
        type="column"
        :opts="BusinessOpts"
        :chartData="BusinessData"
      />
    </view>
    <view class="title">来源分析</view>
    <view class="ChartsBox">
      <qiun-data-charts type="pie" :opts="SourceOpts" :chartData="SourceData" />
    </view>
    <view class="title">订单分析</view>
    <view class="ChartsBox">
      <qiun-data-charts type="mount" :opts="OrderOpts" :chartData="OrderData" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: {
        OrderCount: 0,
        OrderMoney: 0,
        BusinessCount: 0,
      },
      BusinessOpts: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          data: [
            {
              min: 0,
            },
          ],
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
          },
        },
      },
      BusinessData: {},
      month: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],

      // 饼状
      SourceOpts: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            linearType: "custom",
          },
        },
      },
      SourceData: {},

      // 山峰图
      OrderOpts: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          data: [
            {
              min: 0,
            },
          ],
        },
        extra: {
          mount: {
            type: "sharp",
            widthRatio: 1.5,
          },
        },
      },
      OrderData: {},
    };
  },
  onLoad() {
    this.getCountData();
    this.getBusinessData();
    this.getSourceData();
    this.getOrderData();
  },
  methods: {
    async getCountData() {
      let result = await this.$u.api.controller.count();

      if (result && result.code === 1) {
        this.count = result.data;
      }
    },
    // 客户分析->每月客户认证数量
    async getBusinessData() {
      let result = await this.$u.api.controller.business();

      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: this.month,
          series: [
            {
              name: "未认证",
              data: result.data.onCertifiedData,
            },
            {
              name: "已认证",
              data: result.data.CertifiedData,
            },
          ],
        };
        this.BusinessData = JSON.parse(JSON.stringify(res));
      }, 500);
    },

    // 来源分析->各自的客户量
    async getSourceData() {
      let result = await this.$u.api.controller.source();

      // 转为数组
      let SourceArr = [];
      for (let key in result.data) {
        SourceArr.push({
          name: key,
          value: result.data[key],
        });
      }
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              data: SourceArr,
            },
          ],
        };
        this.SourceData = JSON.parse(JSON.stringify(res));
      }, 500);
    },

    // 订单分析->各自的成交数
    async getOrderData() {
      let result = await this.$u.api.controller.order();
	  let OrderArr = [];
	  for (let key in result.data) {
	      OrderArr.push({
	          name: key,
	          value: result.data[key],
	      })
	  }
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              data: OrderArr,
            },
          ],
        };
        this.OrderData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  },
};
</script>

<style>
.container {
  padding: 0px 10px;
}

.title {
  font-weight: bold;
  font-size: 15px;
  padding: 15px 0px;
}

.achieve {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.achieve .order,
.achieve .sale,
.achieve .profit,
.global .visitor,
.global .order,
.global .sale {
  position: relative;
  height: 100%;
  border-radius: 4px;
  width: 32%;
}

.achieve .order {
  background-color: #3c9cff;
}

.achieve .sale {
  background-color: #f9ae3d;
}

.achieve .profit {
  background-color: #5ac725;
}

.achieve .count,
.global .count {
  font-size: 14px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.achieve .money,
.global .money {
  font-size: 14px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.money::before {
  content: "¥";
  margin-right: 2px;
  font-weight: normal;
  font-size: 14px;
}

.achieve .label,
.global .label {
  font-size: 14px;
  position: absolute;
  top: 10px;
  left: 10px;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.achieve .label .icon,
.global .label .icon {
  margin-right: 4px;
}

.ChartsBox {
  width: 100%;
  height: 300px;
}
</style>
